<template>
  <el-form ref="form" :model="form">
    <el-button
      v-if="liked === 0"
      class="care"
      size="mini"
      type="primary"
      plain
      :disabled="btnDisabled"
      @click="attention"
    >
      {{ content }}
    </el-button>
    <el-button
      v-if="liked === 1"
      class="nocare"
      size="mini"
      :disabled="btnDisabled"
      @click="attention"
    >
      {{ content }}
    </el-button>
  </el-form>
</template>
<script>
import { getSysFocusOnBySourceId, sysFocusOnSave, delsysFocusOn } from '@/api/base/deal/dealBase'

export default {
name: 'FOCUS',
props: {
  sourceId: {
    type: String,
    default: () => ''
  },
  sourceName: {
    type: String,
    default: () => ''
  },
  focusType: {
    type: String,
    default: () => ''
  }
},
data() {
  return {
    // 表单参数
  form: {},
  liked: '',
  content: this.$t('+ 关注'),
  btnDisabled: false
  }
},
mounted() {
  this.getSysFocus()
},
methods: {
  // 关注
  getSysFocus() {
    getSysFocusOnBySourceId(this.sourceId).then(response => {
      if (response.msg === 'focus') {
        this.content = this.$t('已关注')
        this.liked = 0
      } else {
        this.content = this.$t('+ 关注')
        this.liked = 1
      }
    })
  },
  attention() {
    const data = { 'focusType': this.focusType, 'sourceId': this.sourceId, 'sourceName': this.sourceName }
    this.btnDisabled = true
    if (this.liked === 1) {
      sysFocusOnSave(data).then(response => {
        if (response.code === 200) {
            this.getSysFocus()
            this.content = this.$t('已关注')
            this.btnDisabled = false
            this.msgSuccess(this.$t('已关注'))
        }
      })
    } else {
      delsysFocusOn(this.sourceId).then(response => {
        if (response.code === 200) {
          this.getSysFocus()
          this.content = this.$t('+ 关注')
          this.btnDisabled = false
          this.msgSuccess(this.$t('已取消关注'))
        }
      })
    }
  }
}
}
</script>
